<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
		body{
		width: 100%;
		height: 100%;
		}
		div{
		width: 100px;
		height: 100px;
		}
		.box{
		padding-left: 50px;
		margin: 0 auto;
		width: 35%;
		height: 150px;
		border: 2px solid gray ;
		border-radius: 1%;
		
		}
		#red,#green,#yellow{
		
		width: 100px;
		height: 100px;
		
		margin-top: 25px;
		margin-right: 25px;
		border: 1px solid gray;
		border-radius: 100%;
		display: inline-block;
		}
		.count{
		font-size: 30px;
		float: right;
		margin-right: 70px;
		margin-top: 50px;
		}
		
		</style>

	</head>

	<body>
		<div class="box">
			<div id="red"></div>
			<div id="yellow"></div>
			<div id="green"></div>
			<div id="count" class="count"></div>
		</div>
			<script>
		var lamp={
				 //红灯相关数据
			red: {	
				obj:document.getElementById('red'),
				timeout:30,
				style:['red','gainsboro','gainsboro'],
				next:'green'
			},
			     //黄灯相关数据
			yellow:{
				obj:document.getElementById('yellow'),
			   timeout:5,
			   style:['gainsboro','yellow','gainsboro'],
			   next:'red'
			},
                 //绿灯相关数据
            green:{
				obj:document.getElementById('green'),
				timeout:35,
				style:['gainsboro','gainsboro','green'],
				next:'yellow'
			},
			changeStyle(style){
				this.red.obj.style.background=style[0];
				this.yellow.obj.style.background=style[1];
                this.green.obj.style.background=style[2]
			}
		   } ;
		   //创建倒计时对象：
		   var count={
		   	obj:document.getElementById('count'),
		   	change:function(num){
		   		this.obj.innerText=(num<10) ? ('0'+num):num;
		   	}
		   };
		   
		   var now =lamp.green;
		   var timeout=now.timeout;
		   lamp.changeStyle(now.style);
		   count.change(timeout);
           setInterval(function(){
           	if(--timeout<=0){
           		now =lamp[now.next];
           		timeout=now.timeout;
           		lamp.changeStyle(now.style);
           	}
           	count.change(timeout);
           },1000);
           
		</script>
	</body>
	<html>
